<template>
	<view>
		<u-sticky offsetTop="1">
			<u-search placeholder="请输入搜索文章关键字" v-model="searchkeyword" @search="Search" @custom="Custom"></u-search>
		</u-sticky>
		<view>
			<u-swiper imgMode="aspectFill" :list="swiperdata" keyName="photo" showTitle :autoplay="true" circular
				:loading="swiperloading" @click="clickSwiper"></u-swiper>
		</view>
		<view class="important">
			<uni-list>
				<uni-list-item v-for="(item, index) in contentsdata" :key="item.id" :title="item.title"
					:note="item.createdUsers.name +'   ' +item.createdtime" :clickable="true"
					@click="NewsClick(item.id)">
					<template v-slot:header>
						<view class="uni-thumb">
							<image :src="item.photo" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-load-more :status="status" :contentText="contentText" v-if="ifBottomRefresh"></uni-load-more>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<view><tab-bar :current="0"></tab-bar></view>
	</view>
</template>

<script>
	import {
		getCarouselApi
	} from '@/api/carousel.js'
	import {
		getContentsPageDataApi
	} from '@/api/contents.js'
	export default {
		name: 'Index',
		data() {
			//是否触底
			const ifBottomRefresh = false
			//滚动坐标 返回顶部用到
			const scrollTop = 0
			//搜索关键字
			const searchkeyword = ""
			//轮播图加载中
			const swiperloading = false
			//轮播图数据
			const swiperdata = []
			//分页查询参数
			const pageNum = 1
			const pageSize = 10
			const orderBys = ['iftop desc', 'id desc']
			const conditionalList = []
			//文章数据
			const contentsdata = []
			const status = 'more'
			const contentText = {
				contentdown: '上拉加载更多~',
				contentrefresh: '加载中',
				contentnomore: '没有更多数据了'
			}
			return {
				scrollTop,
				ifBottomRefresh,
				searchkeyword,
				swiperloading,
				swiperdata,
				pageNum,
				pageSize,
				orderBys,
				conditionalList,
				contentsdata,
				status,
				contentText
			}
		},
		onLoad() {

		},
		methods: {
			//获取轮播图数据
			getCarouselData() {
				getCarouselApi().then(res => {
					this.swiperdata = res.data
				})
			},
			//获取文章数据
			getContentsData() {
				const ifdisable = {
					key: 0,
					value: {
						fieldName: "ifdisable",
						fieldValue: "1",
						cSharpTypeName: "int",
						conditionalType: 0
					}
				}
				//判断是否有搜索关键字
				if (this.searchkeyword !== "") {
					const contentstitle = {
						key: 0,
						value: {
							fieldName: "title",
							fieldValue: this.searchkeyword,
							cSharpTypeName: "string",
							conditionalType: 1
						}
					}
					this.conditionalList.push(contentstitle)
				}
				this.conditionalList.push(ifdisable)
				const httpPagePar = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderBys: this.orderBys,
					conditionalList: this.conditionalList
				}
				getContentsPageDataApi(httpPagePar).then(res => {
					if (res.code == 1) {
						this.contentsdata.push(...res.data.data)
						this.status = "more"
					} else {
						this.status = "noMore"
					}
					this.conditionalList = []
				})

			},
			//搜索事件
			Search(e) {
				this.SearchData()
			},
			//点击右边的搜索按钮事件
			Custom() {
				this.SearchData()
			},
			//搜索获取数据
			SearchData() {
				this.ifBottomRefresh = false
				this.pageNum = 1
				this.contentsdata = []
				this.getContentsData()
				uni.stopPullDownRefresh()
			},
			//监控滚动坐标
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			//新闻点击事件
			NewsClick(id) {
				uni.$u.route({
					url: 'pages/newsdetail/newsdetail',
					type: 'navigateTo',
					params: {
						id: id
					}
				})
			},
			//轮播图点击
			clickSwiper(e) {
				const arr = this.swiperdata[e].link.split(',')
				if (arr[0] === 'news') {
					uni.$u.route({
						url: 'pages/newsdetail/newsdetail',
						type: 'navigateTo',
						params: {
							id: arr[1]
						}
					})
				}
			},
			// 发送给朋友
			onShareAppMessage() {
				return {
					title: '专业的女性赛事信息小程序', // 标题
					path: '/pages/index/index', // 要分享的页面
					imageUrl: 'https://api.femacise.cn/ico/logo.png' // 分享时的图片
				}
			},
			// 分享到朋友圈
			onShareTimeline() {
				return {
					title: '专业的女性赛事信息小程序',
					path: '/pages/index/index',
					imageUrl: 'https://api.femacise.cn/ico/logo.png'
				}
			}
		},
		created() {
			this.getCarouselData()
			this.getContentsData()
		},
		//页面触底函数
		onReachBottom() {
			this.ifBottomRefresh = true
			if (this.status != 'noMore') {
				this.status = 'loading'
				this.pageNum++
				this.getContentsData()
			} else {
				this.status = "noMore"
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.SearchData()
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	.important {
		margin-top: 10upx;
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>